import React from 'react'
import styles from './index.less'
import LayPage from '../../components/layPage'
import closeImg from './img/close.png'
import moment from 'moment'
import { Config } from '../../config'
import bg30 from './img/30_bg.jpg'
import hua from './img/hua.png'
import title from './img/title.png'
// import video from './img/video.mp4'


function Index() {
  function createVideoModal() {
    let src = 'https://chinacycle.oss-cn-shanghai.aliyuncs.com/video.mp4'
    let newSwiper = document.getElementById('newSwiper')
    let div = document.createElement('div');

    div.style.position = 'absolute';
    div.style.width = '100vw';
    div.style.height = '100vh';
    div.style.backgroundColor = "rgba(0,0,0,0.8)"
    div.style.top = '0px';
    div.style.left = '0px';
    div.style.zIndex = 999;
    div.style.display = 'flex';
    div.style.alignItems = "center";


    let close = document.createElement('img');

    close.src = closeImg;
    close.style.width = '10vw';
    close.style.height = '10vw';
    close.style.position = 'absolute';
    close.style.right = '8vw';
    close.style.top = '50px';
    close.addEventListener('click', (e) => {
      e.stopPropagation()
      if (div) {
        document.body.removeChild(div)
      }
    })



    let video = document.createElement('video');
    video.webkitPlaysinline = "webkit-playsinline";
    video.playsInline = "playsinline";
    video.x5Playsinline = "x5-playsinline";
    video.xWebkitAirplay = "allow";
    video.width = '100vw'
    video.style.width = '100vw';
    video.style.maxHeight = '50vh'
    video.controls = true
    // video.src = videoUrl
    video.src = src
    div.appendChild(close)
    div.appendChild(video)
    document.body.appendChild(div)
    video.play()
  }
  const isNextStage = moment().isAfter(Config.EXPIRE_DATE)
  console.log(isNextStage, 'isNextStage')
  // const list = [
  //   {
  //     url: require('./img/img1.png'),
  //     width: 1125,
  //     height: 1730,
  //   },
  //   {
  //     url: require('./img/img2.png'),
  //     width: 1125,
  //     height: 1730,
  //   },
  //   {
  //     url: require('./img/img3.png'),
  //     width: 1125,
  //     height: 1730,
  //   },
  //   {
  //     url: require('./img/img4.png'),
  //     width: 1125,
  //     height: 1730,
  //   },
  //   {
  //     url: require('./img/img5.png'),
  //     width: 1125,
  //     height: 1730,
  //   },
  //   {
  //     url: require('./img/img6.png'),
  //     width: 1125,
  //     height: 1730,
  //   },
  //   {
  //     url: require('./img/img7.png'),
  //     width: 1125,
  //     height: 1730,
  //   },
  //   {
  //     url: require('./img/img1.png'),
  //     width: 1125,
  //     height: 1730,
  //   },
  //   {
  //     url: require('./img/img1.png'),
  //     width: 1125,
  //     height: 1730,
  //   },
  //   {
  //     url: require('./img/img1.png'),
  //     width: 1125,
  //     height: 1730,
  //   },
  // ]
  return (
    <div className={styles.page}>
      {
        isNextStage ? <>
          <div className={styles.videoBox}>
            <img src={require('./img/topImg.png')}></img>
            <img className={styles.play} src={require('./img/play.png')} onClick={createVideoModal}></img>
          </div>
          <div className={styles.imgBox}>
            {
              new Array(18).fill('').map((_, index) => {
                return <LayPage key={index} img={require(`./img/img${index + 1}.png`)}>
                </LayPage>
                // return <img img={require(`./img/img${index + 1}.png`)} ></img> 
              })
            }
          </div></> : <div className={styles.waitPage}>
            <img className={styles.bg} src={bg30} ></img>
            <img className={styles.hua} src={hua}></img>
            <img className={styles.title} src={title}></img>
          </div>
      }

    </div>
  )
}

export default Index
